<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>OS3 Grid Example 8 - Column Renderers</title>
	<link type="text/css" rel="stylesheet" href="css/examples.css" />
	<link type="text/css" rel="stylesheet" href="../os3grid.css" />
	<script src="../os3grid.js" type="text/javascript"></script>
	<script src="../form_validators.js" type="text/javascript"></script>
</head>
<body>
<div id="block_top">
	<h2 class="center">OS3Grid Example 8 - Column Renderers</h2>
	<h4 class="center">By Fabio Rotondo - fsoft (@) sourceforge ( dot ) net</h4>
</div>

		<div class="result" style="width: 90%; height: 800px;">

			<div id="grid"></div>
			<script type="text/javascript">
				// Create an OS3Grid instance
				var g = new OS3Grid ();
				var t;
				var time = new Date();
				var time2;

				// Grid Headers are the grid column names
				g.set_headers ( 'id', 'nick', 'Name', 'Surname', 'Age', 'Actions' );

				// If contents is bigger than container, Grid will automatically show scrollbars
				g.set_scrollbars ( true );

				// The grid will have a solid border (these are CSS attributes)
				g.set_border ( 1, "solid", "#cccccc" );

				// Now, we add some rows to the grid
				g.add_row ( 1, 'fsoft', 'Fabio', 'Rotondo', 33, 'fsoft' );
				g.add_row ( 2, 'john', 'John', 'Bustone', 31, 'john' );
				g.add_row ( 3, 'mkey', 'Mark', 'Key', 28, 'mkey' );
				g.add_row ( 4, 'jdoe', 'John', 'Doe', 35, 'jdoe' );

				for ( t = 5; t < 1000; t ++ )
					g.add_row ( t, 'name' + t, 'User' + t, 'Last' + t, t, 'name' + t );

				// Enable sortable rows
				g.set_sortable ( true );

				g.set_col_type ( 0, "int" );
				g.set_col_type ( 4, "int" );

				// Enable highlight of rows with the mouse
				g.set_highlight ( true );

				// Enable column resize
				g.resize_cols = true;

				g.show_row_num ( true );
				g.set_size ( "90%", "700px" );

				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ( 'grid' );

				time2 = new Date ();

				alert ( ( time2 - time ) );
			</script>
		</div>

</body>
</html>

